<template>
	<u-popup v-model="value" mode="bottom" :popup="false" :mask="true" :closeable="false" :safe-area-inset-bottom="true"
	 close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble" @close="close">
		<view style="display: flex;justify-content: space-between;padding:20rpx 30rpx;">
			<view style="color:#333;" @tap="$emit('input',false)">取消</view>
			<view style="color:rgb(41, 121, 255);" @tap="confirm">确认</view>
		</view>
		<u-tabs v-if="value" :list="genTabsList" :is-scroll="true" :current="tabsIndex" @change="tabsChange" ref="tabs"></u-tabs>
		<view class="area-box">
			<view class="u-flex" :style="[offsetStyle]">
				<template v-for="(item,index) in list" > 
					<view class="area-item" :key="index">
						<view class="u-padding-10 u-bg-gray" style="height: 100%;">
							<scroll-view :scroll-y="true" style="height: 100%">
								<u-cell-group>
									<u-cell-item v-for="(it,i) in item" :title="it.label" :arrow="false" :index="i" :key="i"  @click="clickHandle(index,i)">
										<u-icon v-show="selectIndex[index] === i" slot="right-icon" size="34" name="checkbox-mark"></u-icon>
									</u-cell-item>
								</u-cell-group>
							</scroll-view>
						</view>
					</view>
				</template>
				
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		name: 'u-city-select',
		props: {
			// 通过双向绑定控制组件的弹出与收起
			value: {
				type: Boolean,
				default: false
			},
			// 是否允许通过点击遮罩关闭Picker
			maskCloseAble: {
				type: Boolean,
				default: true
			},
			// 弹出的z-index值
			zIndex: {
				type: [String, Number],
				default: 0
			},
			list:{
				type:Array,
				default:()=>([])
			},
			defaultActive:{
				type:Array,
				default:()=>([])
			}
		},
		data() {
			return {
				tabsIndex: 0,
				selectIndex:{},
				selected:[],
				reflectData:[],
				
			}
		},
		created() {
			this.tabsIndex = this.defaultActive.length-1;
			if(this.defaultActive.length){
				this.defaultActive.forEach((value,index)=>{
					for (var i = 0; i < this.list[index].length; i++) {
						if(this.list[index][i].value === value){
							this.selected.push({name:this.list[index][i].label})
							this.reflectData.push(this.list[index][i])
							this.selectIndex[index] = i
						}
					}
				})
			}
		},
		computed: {
			isChange() {
				return this.tabsIndex >= 1;
			},
			genTabsList() {
				const len = this.selected.length
				if(len){
					if(this.selected.length >= len){
						return this.selected
					}else{
						return [...this.selected,{name:"请选择"}]
					}
					
				}else{
					return [{name:"请选择"}]
				}
			},
			offsetStyle(){
				const bili = 100 / this.list.length
				let style = {
					width:`${this.list.length*50}%`
				}
				if(this.list.length-1  === this.tabsIndex){
					style['transform'] = `translateX(${-(this.tabsIndex-1)*bili}%)`
				}else if(this.tabsIndex >= 1){
					style['transform'] = `translateX(${-(this.tabsIndex)*bili}%)`
				}
				return style
				
			},
			uZIndex() {
				return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
			}
		},
		methods: {
			clickHandle(index,i){
				this.$set(this.selected,index,{name:this.list[index][i].label})
				this.$set(this.reflectData,index,this.list[index][i])
				this.selectIndex[index] = i
				this.tabsIndex = index++
			},
			close() {
				this.$emit('input', false);
			},
			tabsChange(index) {
				this.tabsIndex = index;
			},
			confirm(){
				this.$emit('confirm',this.reflectData)
				this.close();
			}
		}

	}
</script>
<style lang="scss">
	.area-box {
		width: 100%;
		overflow: hidden;
		height: 800rpx;

		>view {
			transition: transform 0.3s ease-in-out 0s;
			transform: translateX(0);

			&.change {
				transform: translateX(-33.3333333%);
			}
		}

		.area-item {
			width: 50%;
			height: 800rpx;
		}
	}
</style>
